<!--
 * @Author: 王灿
 * @Date: 2019-11-24 13:19:52
 * @LastEditTime: 2020-03-17 11:20:49
 * @Description: 优惠券管理
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-coupon\index.vue
 -->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- 优惠券列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 商品名称 -->
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <!-- 商品优惠卷价格 -->
        <el-table-column prop="amount" label="商品优惠卷价格"></el-table-column>
        <!-- 商品优惠卷状态 -->
        <el-table-column prop="status" label="优惠卷状态">
          <template slot-scope="scope">
            <span
              :class="[scope.row.status === 0 ? 'default' : scope.row.status === 1 ? 'doing' : 'over']"
              class="public-table__status"
            ></span>
            <span>{{ scope.row.status === 0 ? '待使用' : scope.row.status === 1 ? '已使用' : '已过期'}}</span>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createAt" label="创建时间"></el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onCheckDetails(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="onDelete(scope.row.id)" class="active">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 新增/详情 -->
    <el-dialog title="优惠卷" :visible.sync="isShow" :close-on-click-modal="false" width="600px">
      <coupon-operate
        :row="row"
        :isShow="isShow"
        @addTableRow="onTableRow"
        @onChangeRefresh="onChangeRefresh"
      />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import CouponOperate from './coupon-operate/index'
import { getCouponList, getCouponDelete, getProductList } from '@/api/commodity.js'
import { getUserList } from '@/api/home.js'
export default {
  name: 'CommodityCoupon',
  components: { JqTitle, JqPage, CouponOperate },
  data() {
    return {
      title: { label: '优惠券管理', flag: true, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      productList: [],
      userList: [],
      row: {},
      isRefresh: false,
      isShow: false
    }
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetCouponList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetCouponList()
    },
    // 监听刷新父组件页面标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetCouponList()
      }
    },
    // 监听弹窗关闭清空数据
    isShow() {
      if (!this.isShow) {
        this.row = {}
      }
    }
  },
  created() {
    this.onGetCouponList()
  },
  methods: {
    // 新增
    onTableRow(data) {
      this.isShow = data.isShow
      this.isRefresh = false
    },
    // 编辑
    onCheckDetails(row) {
      this.isShow = true
      this.row = row
      this.isRefresh = false
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 获取商品优惠卷列表
    onGetCouponList() {
      getCouponList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 新增成功刷新页面
    onChangeRefresh() {
      this.isShow = false
      this.isRefresh = true
    },
    // 删除
    onDelete(id) {
      this.$confirm('此操作将永久删除该优惠卷，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
           let form = new FormData()
          form.append('id', id) 
          getCouponDelete(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetCouponList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.public {
  .public-table__status {
    &.over {
      background: #e6a23c;
    }
    &.doing {
      background: #96b327;
    }
  }
}
</style>
